<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/index.css" />
    <link rel="stylesheet" type="text/css" href="../../script/lib/swiper.min.css"/>
    <style>
	.warp{width: 100%;}
    #toolbar-0{ z-index: 2;}
    #toolbar-1{
        z-index: 1;
        opacity:0;
        background: -webkit-linear-gradient(left, #d70010 , #8e030a); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, #d70010 , #8e030a); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, #d70010 , #8e030a); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #d70010 , #8e030a); /* 标准的语法（必须放在最后） */
    }

    /*轮播图*/
	.banner-warp{width: 100%;padding: 5px 15px;box-sizing: border-box;}
	.banner-warp .banner-box{width: 100%;background: #eaeaea;height: 130px;overflow: hidden;border-radius: 6px;}
    .banner-warp .banner-box .swiper-slide img{width:100%;height: 100%;display:block;}
	.banner-warp .banner-box .nav_pointer span{width: 5px;height: 5px;background: #000000;border-radius:50%;}
	.banner-warp .banner-box .nav_pointer .swiper-pagination-bullet-active{background: #ffffff;}

	.banner-warp .baozheng-box{width: 100%;align-items:center;justify-content: space-between;padding: 10px 0;}
	.banner-warp .baozheng-box .baozheng-one{width: auto;font-size: 12px;color: #4E4A4A;align-items: center;}
	.banner-warp .baozheng-box .baozheng-one span{display: block;padding-left: 4px;box-sizing: border-box;}
	.banner-warp .baozheng-box .baozheng-one img{width: 16px;height: 16px;}


    /* 头条模块 */
    .new-box{width: 100%;height: 30px;margin-top: 15px;border-radius: 4px; padding: 0 10px 0 80px; box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;background:url('../../image/main0/msg_bg.png') no-repeat left 10px center #ffffff;background-size:59px 13px; }
    .new-box .msg-warp{width: 100%;}
    .new-box .msg-one .wz{width: 100%;height: 30px;font-size: 12px;line-height: 30px;color: #333;}

    #diy-content{width: 100%;box-sizing: border-box;background: url(../../image/main0/warp_bg.png) no-repeat #ffffff;background-size: 100% auto;}
    #diy-content .diy-box{box-sizing: border-box;}

	/*商品分类*/
    .class-box{width: 100%;position: relative;padding-bottom: 6px;}
	.fenlei-box{width: 100%;padding: 15px;box-sizing: border-box;flex-wrap: wrap;}
	.fenlei-box .fenlei-one{width: 14%;margin-right: 7.5%;margin-bottom: 10px;}
	.fenlei-box .fenlei-one:nth-child(5n){margin-right: 0;}
	.fenlei-box .fenlei-one .img-box{width: 100%;padding-bottom: 100%;height:0;border-radius:50%;box-sizing: border-box;overflow: hidden;}
    .fenlei-box .fenlei-one .img-box::before{border-radius:50%;}
	.fenlei-box .fenlei-one .img-box img{width: 100%;display: block;line-height: 0;}
	.fenlei-box .fenlei-one .text{font-size: 11px;color: #4D4F50;text-align: center;padding: 4px 0;box-sizing: border-box;width: 100%;}
    .fenlei-box .more-box{align-items: center;justify-content: center;}
   	.fenlei-box .more-box .more{font-size: 11px;color: #8E9194;padding-bottom: 4px;border-bottom:1px solid #8E9194;}
    .fenlei-nav.swiper-pagination{line-height: 0px;bottom: 15px;}
    .fenlei-nav.swiper-pagination span{width: 16px;height: 2px;background:#F4F4F4;opacity: 1;top: 0;}
    .fenlei-nav.swiper-pagination span:first-child{border-radius: 2px 0 0 2px;}
    .fenlei-nav.swiper-pagination span:last-child{border-radius: 0 2px 2px 0;}
    .fenlei-nav.swiper-pagination .swiper-pagination-bullet-active{background: #FF9502;}
    .fenlei-nav.swiper-pagination-bullets .swiper-pagination-bullet{margin: 0;}

	/*品牌分类*/
	.pinpai-warp .title{width: 100%;height: 60px;align-items: center;justify-content: space-between;}
	.pinpai-warp .title .text{font-size: 20px;color: #333;padding: 0 15px;box-sizing: border-box;font-weight: bold;}
    .pinpai-warp .title .more{font-size: 12px;color: #FF9502;padding: 0 15px;box-sizing: border-box;}
  	.pinpai-warp .pinpai-box{width: 100%;padding:0 15px 20px 15px;box-sizing: border-box;flex-wrap: wrap;}
	.pinpai-warp .pinpai-box .pinpai-one{width: 14%;margin-right: 7.5%;}
	.pinpai-warp .pinpai-box .pinpai-one:nth-child(5n){margin-right: 0;}
	.pinpai-warp .pinpai-box .pinpai-one .img-box{width: 100%;padding-bottom: 100%;height:0;border-radius:50%;box-sizing: border-box;overflow: hidden;}
    .pinpai-warp .pinpai-box .pinpai-one .img-box::before{border-radius:50%;}
    .pinpai-warp .pinpai-box .pinpai-one .img-box img{width: 100%;display: block;line-height: 0;}
	.pinpai-warp .pinpai-box .pinpai-one .text{font-size: 11px;color: #4D4F50;text-align: center;padding: 4px 0;box-sizing: border-box;line-height: 20px;width: 100%;}
	.pinpai-warp .pinpai-box .more-box{align-items: center;justify-content: center;}
   	.pinpai-warp .pinpai-box .more-box .more{font-size: 11px;color: #8E9194;padding-bottom: 4px;border-bottom:1px solid #8E9194;}

   	/*自定义板块*/
    .diy-style-0{width: 100%;overflow: hidden;}
    .diy-style-0 .img-box{width: 100%;}
   	.diy-style-0 .img-box img{width: 100%;height: 100%;display: block;}
   	.diy-style-1{width: 100%;overflow: hidden;padding: 0 15px;box-sizing: border-box;}
    .diy-style-1 .img-box{width: 100%;}
   	.diy-style-1 .img-box img{width: 100%;height: 100%;display: block;border-radius: 10px;}
   	.diy-style-2{width: 100%;display: flex;padding: 0 15px;box-sizing: border-box;}
   	.diy-style-2 .img-box{width: 50%;padding-bottom: 30%;margin-right: 10px;position: relative;overflow: hidden;}
   	.diy-style-2 .img-box:nth-child(2){margin-right: 0;}
   	.diy-style-2 .img-box img{width: 100%;height: 100%;display: block;position: absolute;top: 0;left: 0;text-align: 0;border-radius: 10px;}
  	.diy-style-3{width: 100%;display: flex;padding: 0 15px;box-sizing: border-box;}
   	.diy-style-3 .img-box{width: 33.3%;padding-bottom: 30%;margin-right: 10px;position: relative;overflow: hidden;}
   	.diy-style-3 .img-box:nth-child(3){margin-right: 0;}
   	.diy-style-3 .img-box img{width: 100%;height: 100%;display: block;position: absolute;top: 0;left: 0;text-align: 0;border-radius: 10px;}
   	.diy-style-4{width: 100%;display: flex;padding: 0 15px;box-sizing: border-box;}
   	.diy-style-4 .img-box{width: 25%;padding-bottom: 22.5%;margin-right: 10px;position: relative;overflow: hidden;}
   	.diy-style-4 .img-box:nth-child(4){margin-right: 0;}
   	.diy-style-4 .img-box img{width: 100%;height: 100%;display: block;position: absolute;top: 0;left: 0;text-align: 0;border-radius: 10px;}
   	.diy-style-5{width: 100%;display: flex;padding: 0 15px;box-sizing: border-box;}
   	.diy-style-5 .img-box{padding-bottom: 30%;margin-right: 10px;position: relative;overflow: hidden;}
   	.diy-style-5 .img-box:nth-child(1){width: 67.5%;}
   	.diy-style-5 .img-box:nth-child(2){width: 32.5%;margin-right: 0;}
   	.diy-style-5 .img-box img{width: 100%;height: 100%;display: block;position: absolute;top: 0;left: 0;text-align: 0;border-radius: 10px;}

	/*热门推荐*/
   	.module-tuijian{width: 100%;background: #FFFFFF;padding: 10px 0 25px 0;box-sizing: border-box;}
   	.module-tuijian .title{width: 100%;height: 50px;padding: 0 15px;box-sizing: border-box;align-items: center;line-height: 50px;}
   	.module-tuijian .title .t1{font-size: 20px;color: #333;height: 100%;font-weight: bold;}
   	.module-tuijian .title .t2{height: 100%;text-align: right;color: #FF9502;box-sizing: border-box;font-size: 12px;}
   	.module-tuijian .shop-box{width: 100%;overflow-x: auto;align-items: center;height: 126px;}
   	.module-tuijian .shop-box::-webkit-scrollbar{display: none;}
   	.module-tuijian .shop-box .shop-one{width: 276px;margin-left: 15px;flex-shrink: 0;}
   	.module-tuijian .shop-box .shop-one .img-box{width: 126px;height: 126px;flex-shrink: 0;overflow: hidden;}
   	.module-tuijian .shop-box .shop-one .img-box img{width: 100%;}
   	.module-tuijian .shop-box .shop-one .bot-box{width: 100%;padding: 12px;box-sizing: border-box;}
   	.module-tuijian .shop-box .shop-one .bot-box .name{font-size: 14px;color: #333333;height: 60px;line-height: 20px;}
   	.module-tuijian .shop-box .shop-one .bot-box .price{width: 100%;align-items: center;padding-top: 20px;box-sizing: border-box;}
   	.module-tuijian .shop-box .shop-one .bot-box .price .p1{font-size: 16px;color: #FF9502;font-weight: bold;padding-right: 6px;}
   	.module-tuijian .shop-box .shop-one .bot-box .price .p2{font-size: 12px;color: #999999;text-decoration: line-through;}

   	/*自定义模块专区*/
   	.module-diy{width: 100%;background: #FFFFFF;padding: 10px 0;box-sizing: border-box;}
   	.module-diy .title{width: 100%;height: 50px;padding: 0 15px;box-sizing: border-box;align-items: center;line-height: 50px;}
   	.module-diy .title .t1{font-size: 20px;color: #333;height: 100%;font-weight: bold;}
   	.module-diy .title .t2{height: 100%;text-align: right;color: #FF9502;box-sizing: border-box;font-size: 12px;}
   	.module-diy .shop-box{width: 100%;overflow-x: auto;align-items: center;}
   	.module-diy .shop-box::-webkit-scrollbar{display: none;}
   	.module-diy .shop-box .shop-one{width: 126px;margin-left: 15px;flex-shrink: 0}
   	.module-diy .shop-box .shop-one .img-box{width: 126px;height: 126px;overflow: hidden;}
   	.module-diy .shop-box .shop-one .img-box img{width: 100%;}
   	.module-diy .shop-box .shop-one .bot-box{width: 100%;padding: 12px 0;box-sizing: border-box;}
   	.module-diy .shop-box .shop-one .bot-box .name{font-size: 14px;color: #333333;height: 36px;line-height: 18px;}
   	.module-diy .shop-box .shop-one .bot-box .price{width: 100%;align-items: center;padding-top: 10px;box-sizing: border-box;}
   	.module-diy .shop-box .shop-one .bot-box .price .p1{font-size: 16px;color: #FF9502;font-weight: bold;padding-right: 6px;}
   	.module-diy .shop-box .shop-one .bot-box .price .p2{font-size: 12px;color: #999999;text-decoration: line-through;}

	/*全部商品*/
   	.tuijian-box{width: 100%;}
	.tuijian-box .tuijian-type{width: 100%;background: #FFFFFF;overflow-x: auto;height: 50px;text-align: center;font-size: 16px;color: #333333;padding: 5px 0;box-sizing: border-box;}
	.tuijian-box .tuijian-type .tab-one{padding: 0 15px;color: #BDBDBD;flex-shrink: 0;line-height: 40px;}
    .tuijian-box .tuijian-type .tab-one:first-child{margin-left: 15px;}
    .tuijian-box .tuijian-type .tab-one:last-child{margin-right: 15px;}
	.tuijian-box .tuijian-type .tab-one.on{font-weight: 700;color: #ffffff;background: #FF9502;border-radius: 8px;}

    #tuijian-zhanwei{display:none;width:100%;height:50px;overflow: hidden;}
    .tuijian-box .fixed-sta{position: fixed;top: 0;left: 0;right: 0;z-index: 99;}
    .kongge{width: 100%;font-size: 0;overflow: hidden;}
    .kongge.b{width: 100%;font-size: 0;overflow: hidden;}
    .listfot{width: 100%;height:50px;font-size: 12px;text-align: center;line-height: 50px;color: #999999;display: none;}

    /*客服*/
    .kefu{width: 68px;height: 68px;position: fixed;right: 5px;bottom: 60px;background:url(../../image/main0/kefu.png) no-repeat center;background-size:cover;z-index: 99;}

    /*新人专享*/
    .xinren-box{width: 100%;}
    .xinren-box img{width: 100%;display:block;}

    /*推荐模块1*/
    .module-s1{width: 100%;padding: 0 0 15px 0;box-sizing: border-box;border-radius: 0 0 10px 10px;}
    .module-s1 .title{width: 100%;height: 50px;padding: 0 15px;box-sizing: border-box;align-items: center;line-height: 50px;color: #ffffff;}
    .module-s1 .title .t1{font-size: 20px;height: 100%;font-weight: bold;}
    .module-s1 .title .t2{height: 100%;text-align: right;box-sizing: border-box;font-size: 12px;}
    .module-s1 .shop-box{width: 100%;overflow-x: auto;align-items: center;}
    .module-s1 .shop-box::-webkit-scrollbar{display: none;}
    .module-s1 .shop-box .shop-one{width: 105px;margin-left: 15px;flex-shrink: 0;background: #ffffff;border-radius: 10px;box-sizing: border-box;overflow: hidden;}
    .module-s1 .shop-box .shop-one::before{border-radius: 20px;border: 1px solid #ffffff;}
    .module-s1 .shop-box .shop-one .img-box{width: 105px;height: 105px;overflow: hidden;}
    .module-s1 .shop-box .shop-one .img-box img{width: 100%;}
    .module-s1 .shop-box .shop-one .price{width: 100%;box-sizing: border-box;background: #FF6802;color: #ffffff;line-height: 30px;padding-left: 8px;font-weight: bold;}

    /*推荐模块2*/
    .module-s2 {background: #ffffff;margin: 0 15px;border-radius:10px;overflow: hidden;box-shadow: 0px 2px 11px 0px rgba(0, 0, 0, 0.03);}
    .module-s2 .title{width: 100%;height: 40px;padding: 0 15px;box-sizing: border-box;align-items: center;line-height: 40px;color: #ffffff;}
    .module-s2 .title .t1{font-size: 18px;height: 100%;font-weight: bold;text-shadow: 0px 0px 2px #2363F1;}
    .module-s2 .title .t2{width: 54px;height: 22px;box-sizing: border-box;font-size: 12px;border-radius: 20px;line-height: 22px;text-align: center;
    background: url(../../image/main0/tj_more1.png) no-repeat right 4px center rgba(255, 255, 255, 0.2);background-size: 9px;padding-right: 8px;box-sizing: border-box;}
    .module-s2 .title .t2::before{border-radius: 40px;border: 1px solid #ffffff;}
    .module-s2 .shop-box{width: 100%;overflow-x: auto;align-items: center;padding: 15px 0;box-sizing: border-box;}
    .module-s2 .shop-box::-webkit-scrollbar{display: none;}
    .module-s2 .shop-box .shop-one{width: 105px;margin-left: 15px;flex-shrink: 0;border-radius: 10px;}
    .module-s2 .shop-box .shop-one .img-box{width: 105px;height: 105px;overflow: hidden;}
    .module-s2 .shop-box .shop-one .img-box img{width: 100%;}
    .module-s2 .shop-box .shop-one .bot-box{width: 100%;padding-top: 6px;box-sizing: border-box;}
    .module-s2 .shop-box .shop-one .bot-box .name{font-size: 14px;color: #333333;height: 22px;line-height: 22px;}
    .module-s2 .shop-box .shop-one .bot-box .price{width: 100%;align-items: center;box-sizing: border-box;padding-top: 4px;}
    .module-s2 .shop-box .shop-one .bot-box .price .p1{font-size: 16px;color: #FF9502;font-weight: bold;padding-right: 2px;}
    .module-s2 .shop-box .shop-one .bot-box .price .p2{font-size: 12px;color: #999999;text-decoration: line-through;padding-left: 6px;box-sizing: border-box;}

    /*推荐模块3*/
    .module-s3 {background: #ffffff;margin: 0 15px;border-radius:10px;overflow: hidden;padding: 4px 4px 15px 4px;box-sizing: border-box;box-shadow: 0px 2px 11px 0px rgba(0, 0, 0, 0.03);}
    .module-s3 .shop-warp:first-child{background: linear-gradient(180deg, #FFECD5 0%, rgba(255, 255, 255, 0) 100%);border-radius: 10px;}
    .module-s3 .shop-warp .title{width: 100%;height: 40px;padding: 0 15px;box-sizing: border-box;align-items: center;line-height: 40px;}
    .module-s3 .shop-warp .title .t1{font-size: 18px;height: 100%;font-weight: bold;color: #333;}
    .module-s3 .shop-warp .title .t2{box-sizing: border-box;font-size: 12px;color: #FF9502;line-height: 22px;text-align: center;background-size: 9px;}
    .module-s3 .shop-box{width: 100%;padding: 0 10px;box-sizing: border-box;}
    .module-s3 .shop-box .shop-one{width: 50%;border-radius: 10px;}
    .module-s3 .shop-box .shop-one:first-child{padding-right: 3px;}
    .module-s3 .shop-box .shop-one:last-child{padding-left: 3px;}
    .module-s3 .shop-box .shop-one .img-box{width: 100%;padding-top: 100%;border-radius: 10px;height: 0;}
    .module-s3 .shop-box .shop-one .img-box img{width: 100%;}
    .module-s3 .shop-box .shop-one .price{width: 100%;align-items: center;box-sizing: border-box;padding-top: 10px;}
    .module-s3 .shop-box .shop-one .price .p1{font-size: 14px;color: #FF9502;font-weight: bold;padding-right: 2px;}
    .module-s3 .shop-box .shop-one .price .p2{font-size: 12px;color: #999999;text-decoration: line-through;padding-left: 6px;box-sizing: border-box;}

    /*推荐模块4*/
    .module-s4 {margin: 0 15px;border-radius:10px;overflow: hidden;padding: 15px 15px 15px 0;box-sizing: border-box;box-shadow: 0px 2px 11px 0px rgba(0, 0, 0, 0.03);}
    .module-s4 .title{width: 50px;box-sizing: border-box;align-items: center;line-height: 40px;color: #ffffff;flex-direction: column;}
    .module-s4 .title .t1{font-size: 18px;font-weight: bold;width: 18px;line-height: 22px;}
    .module-s4 .title .t2{width: 22px;height: 22px;border-radius: 50%;background: url(../../image/main0/tj_more2.png) no-repeat center #ffffff;background-size: 10px;margin-bottom: 10px;}
    .module-s4 .shop-box{width: 100%;overflow-x: auto;align-items: center;padding: 15px 0;box-sizing: border-box;background: #ffffff;border-radius: 10px;}
    .module-s4 .shop-box::-webkit-scrollbar{display: none;}
    .module-s4 .shop-box .shop-one{width: 90px;margin-left: 15px;flex-shrink: 0;border-radius: 10px;}
    .module-s4 .shop-box .shop-one .img-box{width: 90px;height: 90px;overflow: hidden;}
    .module-s4 .shop-box .shop-one .img-box img{width: 100%;}
    .module-s4 .shop-box .shop-one .bot-box{width: 100%;padding-top: 6px;box-sizing: border-box;}
    .module-s4 .shop-box .shop-one .bot-box .name{font-size: 14px;color: #333333;height: 22px;line-height: 22px;}
    .module-s4 .shop-box .shop-one .bot-box .price{width: 100%;align-items: center;box-sizing: border-box;padding-top: 4px;}
    .module-s4 .shop-box .shop-one .bot-box .price .p1{font-size: 16px;color: #FF9502;font-weight: bold;padding-right: 2px;}
    .module-s4 .shop-box .shop-one .bot-box .price .p2{font-size: 12px;color: #999999;text-decoration: line-through;padding-left: 6px;box-sizing: border-box;}

    </style>
</head>

<body>
    <div id="vue" class="warp">

        <!--页面diy-->
		<div id="diy-content" v-if="Pdata.diy">
            <!--旧得diy模板-->
            <div class="diy-box" v-for="(item,key) in Pdata.diy.items">
                <!--轮播图 和 消息轮播-->
            	<div class="banner-warp" v-if="item.type == 'banner' && item.data != null">
                    <!--轮播-->
                    <div class="banner-box swiper-container" :style="'height:' + bHeight + 'px'" id="banner">
        				<div class="banner swiper-wrapper">
        					<div class="swiper-slide bgpic" v-for="(i,k) in item.data" :data-id="i.toid" :data-type="i.type" :data-title="i.title" tapmode onclick="open_fenlei(this)">
                                <img :src="i.image">
                            </div>
        				</div>
        				<div class="nav_pointer swiper-pagination"></div>
        			</div>
                    <!--消息滚动-->
                    <div class="new-box flex" >
    					<div class="msg-warp swiper-container" id="swiper2" >
    						<div class="msg-box swiper-wrapper" >
    							<div class="msg-one swiper-slide" v-for="(item,key) in newData">
    								<div class="wz han_1" v-text="item"></div>
    							</div>
    						</div>
                            <div class="swiper-pagination"></div>
    					</div>
        			</div>
        		</div>
                <!--循环分类-->
                <div class="class-box swiper-container" id="swiper3" v-if="item.type == 'navBar'">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide fenlei-box flex" v-for="(c,v) in item.data">
                			<div class="fenlei-one" v-for="(i,t) in c" v-if="i.type == 'class'" :data-type="i.type" :data-title="i.title"  :data-id="i.toid" tapmode onclick="open_fenlei(this)">
                				<div class="img-box bgpic" :style="{backgroundImage:'url('+i.image+')'}"></div>
                				<div class="text han_1" v-text="i.title"></div>
                			</div>
                		</div>
                    </div>
                    <div class="fenlei-nav swiper-pagination"></div>
                </div>
                <!--循环品牌分类-->
                <div class="pinpai-warp" v-if="item.type == 'pinpaiBar'">
    				<div class="title flex">
    					<div class="text" v-text="item.params.title"></div>
                        <div class="more" tapmode onclick="open_allpinpai(this);">更多</div>
    				</div>
    				<div class="pinpai-box flex">
    					<div class="pinpai-one" tapmode onclick="open_pingpai(this);" :data-id="i.id" :data-title="i.title" v-for="(i,t) in item.data">
    						<div class="img-box bgpic" :style="{backgroundImage:'url('+i.logo+')'}"></div>
    						<div class="text han_1" v-text="i.title"></div>
    					</div>
    				</div>
    			</div>
                <!--新人有好礼-->
                <div class="diy-style-0" v-if="item.type == 'imageNoMargin'">
                    <div class="img-box" :data-title="item.data.title" :data-id="item.data.val" :data-img="item.data.imgUrl"  :data-type="item.data.type" tapmode onclick="open_fenlei(this);">
                        <img :src="item.data.imgUrl"/>
                    </div>
        		</div>
                <!--一个图片的活动-->
                <div class="diy-style-1" v-if="item.type == 'imageSingle'">
                    <div class="img-box" :data-title="item.data.title" :data-id="item.data.val" :data-img="item.data.imgUrl"  :data-type="item.data.type" tapmode onclick="open_fenlei(this);">
                        <img :src="item.data.imgUrl"/>
                    </div>
        		</div>
                <!--三个图片的活动-->
                <div class="diy-style-3" v-if="item.type == 'window3'">
                    <div class="img-box" v-for="(i,t) in item.data" :data-title="i.title" :data-id="i.val" :data-type="i.type" tapmode onclick="open_fenlei(this);">
        				<img :src="i.imgUrl"/>
        			</div>
        		</div>
                <!--四个图片的活动-->
                <div class="diy-style-4" v-if="item.type == 'window4'">
        			<div class="img-box" v-for="(i,t) in item.data" :data-title="i.title" :data-id="i.val" :data-type="i.type" tapmode onclick="open_fenlei(this);">
        				<img :src="i.imgUrl"/>
        			</div>
        		</div>
                <!--2:1的图片活动-->
                <div class="diy-style-5" v-if="item.type == 'winimage'">
                    <div class="img-box" :data-title="item.lfdata.title" :data-id="item.lfdata.val" :data-type="item.lfdata.type" tapmode onclick="open_fenlei(this);">
        				<img :src="item.lfdata.imgUrl"/>
        			</div>
                    <div class="img-box" :data-title="item.rtdata.title" :data-id="item.rtdata.val" :data-type="item.rtdata.type" tapmode onclick="open_fenlei(this);">
        				<img :src="item.rtdata.imgUrl"/>
        			</div>
        		</div>
                <!--自定义模块横版-->
                <div class="module-tuijian" v-if="item.type == 'zhuantiGoods' && item.params.style == 2">
        			<div class="title flex">
        				<div class="t1" v-text="item.params.title"></div>
        				<div class="t2 flex1" :data-id="item.params.ztid" :data-title="item.params.ztitle" data-type="zhuanti" tapmode onclick="open_fenlei(this);">更多</div>
        			</div>
        			<div class="shop-box flex">
        				<div class="shop-one border-all flex" v-for="(i,t) in item.data" :data-id="i.sid" tapmode onclick="open_goods(this)">
        					<div class="img-box"><img :src="i.image"/></div>
        					<div class="bot-box flex1">
        						<div class="name han_3" v-text="i.title"></div>
        						<div class="price flex">
                                    <span class="p1" v-text="'¥' + i.price"></span>
                                    <span class="p2" v-if="i.price_del" v-text="'¥' + i.price_del"></span>
        						</div>
        					</div>
        				</div>
        			</div>
        		</div>
                <!--自定义模块竖版-->
                <div class="module-box" v-if="item.type == 'zhuantiGoods' && item.params.style == 1">
        			<div class="module-diy">
        				<div class="title flex">
        					<div class="t1" v-text="item.params.title"></div>
        					<div class="t2 flex1" :data-id="item.params.ztid" :data-title="item.params.ztitle" data-type="zhuanti" tapmode onclick="open_fenlei(this);">更多</div>
        				</div>
        				<div class="shop-box flex">
        					<div class="shop-one" v-for="(i,t) in item.data" :data-id="i.sid" tapmode onclick="open_goods(this)">
        						<div class="img-box"><img :src="i.image"/></div>
        						<div class="bot-box flex1">
        							<div class="name han_2" v-text="i.title"></div>
        							<div class="price flex">
        								<span class="p1" v-text="'¥' + i.price"></span>
        								<span class="p2" v-if="i.price_del" v-text="'¥' + i.price_del"></span>
        							</div>
        						</div>
        					</div>
        				</div>
        			</div>
        		</div>
                <!--左右模块-->
                <div class="module-s3 flex" v-if="item.type == 'hotGoodsTwo'">
                    <div class="shop-warp flex1">
                        <div class="title flex">
                            <div class="t1 flex1 han_1" v-text="item.params.title"></div>
                            <div class="t2"  :data-id="item.params.ztid" :data-title="item.params.ztitle" data-type="zhuanti" tapmode onclick="open_fenlei(this);">更多</div>
                        </div>
                        <div class="shop-box flex" >
                            <div class="shop-one flex1" v-for="(i,t) in item.data.left" :data-id="i.sid" tapmode onclick="open_goods(this)">
                                <div class="img-box bgpic" :style="{backgroundImage:'url('+i.image+')'}"></div>
                                <div class="price flex">
                                    <span class="p1" v-text="'¥' + i.price"></span>
                                    <span class="p2" v-text="'¥' + i.price_del"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="shop-warp flex1">
                        <div class="title flex">
                            <div class="t1 flex1 han_1" v-text="item.paramst.title"></div>
                            <div class="t2" :data-id="item.paramst.ztid" :data-title="item.paramst.ztitle" data-type="zhuanti" tapmode onclick="open_fenlei(this);">更多</div>
                        </div>
                        <div class="shop-box flex">
                            <div class="shop-one flex1" v-for="(i,t) in item.data.right" :data-id="i.sid" tapmode onclick="open_goods(this)">
                                <div class="img-box bgpic" :style="{backgroundImage:'url('+i.image+')'}"></div>
                                <div class="price flex">
                                    <span class="p1" v-text="'¥' + i.price"></span>
                                    <span class="p2" v-text="'¥' + i.price_del"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--左侧标题的模块-->
                <div class="module-s4 bgpic flex" :style="{backgroundImage:'url('+item.params.image+')'}" v-if="item.type == 'hotGoodsLeft'">
                    <div class="title flex">
                        <div class="t1 flex1" v-text="item.params.title"></div>
                        <div class="t2" :data-id="item.params.ztid" :data-title="item.params.ztitle" data-type="zhuanti" tapmode onclick="open_fenlei(this);"></div>
                    </div>
                    <div class="shop-box flex1 flex">
                        <div class="shop-one" v-for="(i,t) in item.data" :data-id="i.sid" tapmode onclick="open_goods(this)">
                            <div class="img-box"><img :src="i.image"/></div>
                            <div class="bot-box flex1">
                                <div class="name han_1" v-text="i.title"></div>
                                <div class="price flex">
                                    <span class="p1" v-text="'¥' + i.price"></span>
                                    <span class="p2" v-text="'¥' + i.price_del"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--头部带背景模块-->
                <div class="module-s2" v-if="item.type == 'hotGoodsTopBg'">
                    <div class="title bgpic flex" :style="{backgroundImage:'url('+item.params.image+')'}">
                        <div class="t1 flex1 han_1" v-text="item.params.title"></div>
                        <div class="t2 border-all" :data-id="item.params.ztid" :data-title="item.params.ztitle" data-type="zhuanti" tapmode onclick="open_fenlei(this);">更多</div>
                    </div>
                    <div class="shop-box flex">
                        <div class="shop-one" v-for="(i,t) in item.data" :data-id="i.sid" tapmode onclick="open_goods(this)">
                            <div class="img-box"><img :src="i.image"/></div>
                            <div class="bot-box flex1">
                                <div class="name han_1" v-text="i.title"></div>
                                <div class="price flex">
                                    <span class="p1" v-text="'¥' + i.price"></span>
                                    <span class="p2" v-text="'¥' + i.price_del"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--黄色背景模块-->
                <div class="module-s1 bgpic" style="background-image:url(../../image/main0/module_bg1.png)" v-if="item.type == 'hotGoodsYuan'">
                    <div class="title flex">
                        <div class="t1 flex1 han_1" v-text="item.params.title"></div>
                        <div class="t2" :data-id="item.params.ztid" :data-title="item.params.ztitle" data-type="zhuanti" tapmode onclick="open_fenlei(this);">更多</div>
                    </div>
                    <div class="shop-box flex">
                        <div class="shop-one border-all" v-for="(i,t) in item.data" :data-id="i.sid" tapmode onclick="open_goods(this)">
                            <div class="img-box"><img :src="i.image"/></div>
                            <div class="price han_1" v-text="'现价:  ¥' + i.price"></div>
                        </div>
                    </div>
                </div>
                <!--空白线-->
                <div class="kongge"  :style="{height:item.style.height + 'px'}" v-if="item.type == 'blank'"></div>
                <div class="kongge b"  :style="{height:item.style.height + 'px'}" v-if="item.type == 'fenge'"></div>
            </div>
		</div>

		<!--全部商品-->
		<div class="tuijian-box">
			<div class="tuijian-type flex" id="fixed-cont">
				<div :class="['tab-one',key==0 ? 'on':'']" tapmode onclick="tab_tuijian(this);" v-for="(item,key) in Pdata.labels" v-text="item.title" :data-id="item.id"></div>
			</div>
            <div id="tuijian-zhanwei"></div>
			<div class="shop-list flex" >
				<div class="shop-one" v-for="(item,key) in Pdata.listData" :data-id="item.sid" tapmode onclick="open_goods(this);">
				 	<div class="img-box bgpic" :style="{backgroundImage:'url('+item.image+')'}"></div>
				 	<div class="shop-info">
				 		<div class="name han_2" v-text="item.title"></div>
				 		<div class="price-box flex">
                            <div class="price" v-text="'¥'+item.price"></div>
                            <div class="p3" v-if="item.price_del" v-text="'¥' + item.price_del"></div>
                            <div class="num-box flex1" v-text="'已售'+item.buy_nums"></div>
				 		</div>
				 	</div>
				</div>
			</div>
	    </div>

        <!--占位图-->
        <div class="nodata" style="display:none;" :style="{ display:(noData ? '':'none')}">
            <img src="../../image/no_page/no_shop.png" />
            <p>暂无商品</p>
        </div>

        <!-- 底部 -->
        <div class="bottom-box" :style="{ display:(loadingMsg ? '':'none')}">
            <div class="msgbox" v-html="loadingMsg" style="color:#999;"></div>
        </div>

        <div class="kefu" tapmode onclick="gokefu()"></div>

    </div>
</body>

<script type="text/javascript" src="../../script/base.min.js" id="loadjs" data-js="L/swiper.min,L/lanyunDrop,L/lazyload.min"></script>
<script type="text/javascript">

	define(function (require, exports, module) {

        var bannerw = api.winWidth;
        var banner_height = ((bannerw-30)*260)/750;
        var labelid = 0;

		//获取首页数据
		_page.getData = function(loading) {
            lanYun.debug =1;
		 	lanYun.getVueData({url:'home/index',get:{},cache:0,loading:loading},function(ret) {
                //console.log('首页数据加载');
                //console.log(JSON.stringify(ret));
                //储存热门搜索
                if(ret.data.remenkeys){
                    api.setPrefs({
                        key: 'hotkey',
                        value: ret.data.remenkeys
                    });
                }
                //首页列表数据的第一个id
                if(ret.data.labels && ret.data.labels.length > 0){
                    labelid = ret.data.labels[0]['id'] || 0;
                }
                //banner初始化
                if(lanYun.swiper1)lanYun.swiper1.destroy();
                if(document.getElementById("banner")){
                    lanYun.swiper1 = new Swiper('#banner', {
                        pagination: {el: '.swiper-pagination'},
                        autoplay:{
                          delay: 3000,
                          disableOnInteraction: false
                        },
                        observer:true,
                        loop:true,
                        observeParents: true,paginationClickable: true,
                        on:{
                            touchStart: function(event){
                                if(document.body.scrollTop==0) {
                                    window.scrollBy(0, 1);
                                }
                            },
                        }
                    });
                }
                if(lanYun.swiper2) lanYun.swiper2.destroy();
    			lanYun.swiper2 = new Swiper('#swiper2', {
    				direction:'vertical',
    				observer: true,
    				autoplay: { // 自动滑动
    					delay: 5000, //1秒切换一次
    					disableOnInteraction: false
    				},
                    allowTouchMove: false,
    				observeParents: true,
    				paginationClickable: true,
    				on: {
    					touchStart: function(event) {
    						if(document.body.scrollTop==0) {
    							window.scrollBy(0, 1);
    						}
    					},
    					slideChangeTransitionEnd: function(swiper) {
    						var _pre_slide = this.slides[this.previousIndex];
    						var _act_slide = this.slides[this.activeIndex];
    					}
    				}
    			});
                if(lanYun.swiper3) lanYun.swiper3.destroy();
    			lanYun.swiper3 = new Swiper('#swiper3', {
    				pagination: {
    					el: '.swiper-pagination'
    				},
    				observer: true,
    				observeParents: true,
    				paginationClickable: true,
    				on: {
    					touchStart: function(event) {
    						if(document.body.scrollTop==0) {
    							window.scrollBy(0, 1);
    						}
    					},
    					slideChangeTransitionEnd: function(swiper) {
    						var _pre_slide = this.slides[this.previousIndex];
    						var _act_slide = this.slides[this.activeIndex];
    					}
    				}
    			});
            });
		};

        // 获取推荐商品的数据
        _page.getGoodsList = function (loading) {
            lanYun.getVueData2({url:'home/getGoodsList',get:{page:lanYun.page,labelid:labelid,},cache:0,loading:loading},function(ret) {
                //console.log(JSON.stringify(ret));
            });
        }

        var numFun = 0;
        //获取天宏快报
        getNewNumFun = function (){
            //console.log('获取天宏数据');
            lanYun.vue.newData = [];
            lanYun.ajaxSta = 0;
            //console.log(numFun);
            if(numFun){
                return;
            }
            lanYun.get('home/quickinfo',function (ret) {
                //console.log(JSON.stringify(ret));
                if(ret.data){
                    lanYun.vue.newData = ret.data.data;
                }
                setTimeout(function (){
                    getNewNumFun();
                },20000)
            },0);
        }

        api.addEventListener({
            name:'pause'
        }, function(ret, err){
            numFun = 1;
        });

        api.addEventListener({
            name:'resume'
        }, function(ret, err){
            numFun = 0;
            getNewNumFun();
        });

        //获取缓存数据
        getCache = function (){
            lanYun.get('home/getCache',function (ret){
                //console.log(JSON.stringify(ret));
                lanYun.setStorage("cityData",ret.data.cityData)
                lanYun.setStorage("imageData",ret.data.uploadInfo)
                lanYun.setStorage("system",ret.data.system)
            },0);
        }

        //获取用户信息
        getuserinfo = function (){
            lanYun.get('User/getinfo' ,function (ret) {
                //console.log(JSON.stringify(ret));
                if(ret.errcode == 0){
                    //lanYun.vue.isnew = ret.data.isnew
                    lanYun.updateUdata(ret.data, 0);
                    lanYun.event('mainRed');
                }
            },0);
        }

        //lanYun.debug = 1;
		lanYun.newVue('#vue',{
            bHeight:banner_height,
            newData:[],
            isnew:1
        },function(tis) {
            _page.getData();
            getCache();
		});
        getNewNumFun();

		//下拉加载
		if(isApp){
            var conimg = [];
            for (var i = 1; i <= 18; i++) {
				conimg.push('widget://image/loading/icon9/'+i+'.PNG');
			}
            api.setCustomRefreshHeaderInfo({bgColor: '#FF9502',isScale: false,loadAnimInterval : 30,image: {pull:conimg,load:conimg}
            }, function() {
                lanYun.ajaxPageSta = 0; lanYun.page = 1;
			 	lanYun.vue.loadingMsg = lanYun.loadingMsg;
			 	_page.getData(0);
                if (lanYun.isLogin()) {
                    getuserinfo();
                    getCache();
                }
            });
            //自带下拉刷新
			// api.setRefreshHeaderInfo({
			//  	visible: true,loadingImg: 'widget://image/main/xl3.png',bgColor:'#FF9502',textColor: '#fff',textDown: '下拉刷新...',textUp: '松开刷新...'
			// }, function(ret, err) {
			//  	lanYun.ajaxPageSta = 0; lanYun.page = 1;
			//  	lanYun.vue.loadingMsg = lanYun.loadingMsg;
			//  	_page.getData(2);
            //     getCache();
			// });
		}

		//滚动加载..
		new auiScroll({distance:200, listen:true},function(ret) {
			if($(window).scrollTop() < 2) ret.isToBottom = false;
	        var d = ret.scrollTop / 208;
            var h = $('#diy-content').height();
            //console.log(ret.scrollTop)
            if(ret.scrollTop > h){
                $('#fixed-cont').addClass("fixed-sta");
                $('#tuijian-zhanwei').show();
            }else {
                $('#fixed-cont').removeClass("fixed-sta");
                $('#tuijian-zhanwei').hide();
            }
	        //document.getElementById('toolbar-1').style.opacity  = d;
			if(!ret.isToBottom) return;
            _page.getGoodsList(2);
		});

		//-------------------------------------

        // lanYun.openWin('login/yq_code.html', {
        //     win:'win',
        //     title:'',
        //     border:'1',
        //     menu:'跳过',
        //     frameParam :{},
        // });

	  	//打开不同分类的链接
	    open_fenlei = function (tis) {
	        var dst = tis.dataset;
            switch(dst.type){
                case "class":
                    lanYun.openWin('main0/list_shop.html', {win:'none',frameParam : dst});
                    break;
                case "zhuanti":
                    lanYun.openWin('main0/list_zhuanti.html', {win:'win',title:dst.title,border:'1',frameParam : dst});
                    break;
                case "scoreshop":
                    lanYun.openWin('main0/list_jifen.html', {win:'win',title:dst.title,border:'1',frameParam : dst});
                    break;
                case "newusershop":
                    lanYun.openWin('main0/list_xinren.html', {win:'win',title:dst.title,border:'1',frameParam : dst});
                    break;
                case "pinpai":
                    lanYun.openWin('main0/list_pinpai.html', {win:'win',title:dst.title,frameParam : dst});
                    break;
                case "shop":
                    lanYun.openWin('goods/show', {win:'none',frameParam : dst});
                    break;
                case "goods":
                    lanYun.openWin('goods/show', {win:'none',frameParam : dst});
                    break;
                case "url":
    				dst.url = dst.id;
    				lanYun.openWin('webpage.html', {win:'win',title:dst.title,border:'1',frameParam:dst,progress:{type:'page',title:'加载中',color:'rgba(0,0,0,.3)',height:3}});
    				break;
                case "none":
                    return;
                    break;
                default:
                    break;
            }
	    }

        //打开商品详情
	    open_goods = function (tis) {
	        var dst = tis.dataset;
	        lanYun.openWin('goods/show', {
	            win:'none',
	            frameParam : dst,
	        });
	    }

        //切换推荐商品类型
        tab_tuijian = function (tis){
            var dst = tis.dataset;
			if($(tis).hasClass('on')){return;}
			$(tis).addClass('on').siblings().removeClass('on');
            labelid = dst.id;
            lanYun.page = 1;lanYun.ajaxPageSta = 0;
            _page.getGoodsList(2);
        }

		//打开品牌
		open_pingpai = function (tis) {
	        var dst = tis.dataset;
	        lanYun.openWin('main0/list_pinpai.html', {
	            title : dst.title,
	            frameParam : dst,
	       });
	    }

		//打开新人列表
		open_xinren = function (tis) {
	        var dst = tis.dataset;
	        lanYun.openWin('main0/list_xinren.html', {
	            title : dst.title
	        });
	    }

		//打开拼团列表
		open_pintuan = function (tis) {
	        var dst = tis.dataset;
	        lanYun.openWin('main0/list_pintuan.html', {
	            title : dst.title
	        });
	    }

		//打开秒杀列表
		open_miaosha = function (tis) {
	        var dst = tis.dataset;
	        lanYun.openWin('main0/list_miaosha.html', {
	            title : dst.title
	        });
	    }

        //打开全部品牌
        open_allpinpai = function (){
            lanYun.openWin('main0/all_pinpai.html', {
	            title : '品牌列表'
	        });
        }

        //打开全部品牌
        open_code = function (){
            lanYun.openWin('login/yq_code.html', {
	            title : '',
                border:1,
                menu:'<span id="close">跳过</span>'
	        });
        }

        // 判断是否是新人函数
        setisnew = function (){
            return;
            // var udata = lanYun.getUdata();
            // lanYun.vue.isnew = 1;
            // if(!udata) return;
            // lanYun.vue.isnew = udata.isnew;
        }

        //去客服
        gokefu = function (){
            if(!lanYun.isLogin()){
                lanYun.openLogin();
                return;
            }
            lanYun.getPermission(['camera','photos','location','microphone']);
            var udata = lanYun.getUdata();
            var avatar = lanYun.wurl+'static/logo.png';
            if(udata){
                avatar = udata.avatar;
            }
            var qiyuSdk = api.require('qiyuSdk');
            var params = {
                source:{
                    sourceTitle:'天宏沐晨商城APP',
                    sourceUrl:'',
                    sourceCustomInfo:'来自首页'
                },
                // commodityInfo:{
                //     commodityInfoTitle:dataInfo.title,
                //     commodityInfoDesc:dataInfo.tit,
                //     pictureUrl:dataInfo.image,
                //     commodityInfoUrl:dataInfo.image, //链接地址
                //     note:'￥'+dataInfo.price,
                //     show:true
                // },
                sessionTitle:'天宏沐晨商城客服',
                groupId:0,
                staffId:0,
            }
            qiyuSdk.openServiceWindow(params);
            var prmUI = {
                showHeadImage:true,
                customerHeadImage:avatar //头像地址
            }
            qiyuSdk.setCustomUIConfig(prmUI);
        }

	});
</script>
</html>
